<template>
  <div class="wrap">
    <!-- 搜索框 -->
    <div class="topper">
      <div class="logo">
        <img src="@/assets/indexlogo.png" alt />
      </div>
      <div class="search" @click="$router.push('/search')">
        <i class="iconfont iconsearch news">搜索新闻</i>
      </div>
      <div class="user">
        <i class="iconfont iconwode person" @click="$router.push('/user')"></i>
      </div>
    </div>
    <!-- tab栏 -->
    <van-tabs v-model="active" @change="getCategory">
      <div class="MoreCate iconfont iconjiantou1" @click="$router.push('/programa')"></div>
      <van-tab v-for="item in TabDom" :title="item.name" :key="item.id">
        <van-list
          v-model="item.loading"
          :finished="item.finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad"
        >
          <div v-for="item in item.PostList" :key="item.id">
            <SingleDom
              v-if="item.type ==1 && item.cover.length>=1 && item.cover.length<3"
              :postData="item"
              :comment="item.comment_length"
              @clicked="$router.push('/post?id='+item.id)"
            />
            <MoreDom
              v-if="item.type ==1 && item.cover.length>=3"
              :postData="item"
              :comment="item.comment_length"
              @clicked="$router.push('/post?id='+item.id)"
            />
            <VideoDom
              v-if="item.type ==2"
              :postData="item"
              :comment="item.comment_length"
              @clicked="$router.push('/post?id='+item.id)"
            />
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 引入单图片组件
import SingleDom from "@/components/SingleDom";

// 引入多图片组件
import MoreDom from "@/components/MoreDom";

// 引入视频组件
import VideoDom from "@/components/VideoDom";

export default {
  components: {
    SingleDom,
    MoreDom,
    VideoDom,
  },

  data() {
    return {
      active: 1,
      TabDom: [],
      // PostList: [],
    };
  },

  created() {
    if (localStorage.getItem("postList")) {
      this.TabDom = JSON.parse(localStorage.getItem("postList")).map(
        (element) => {
          return {
            ...element,
            PostList: [],
            pageSize: 5,
            pageIndex: 1,
            loading: false,
            finished: false,
          };
        }
      );
      this.getCategory();
    } else {
      // 该接口不强制要求登录，但是对于登录的用户，加上验证信息会返回该用户关注的栏目文章
      // 接口类型:【GET】
      // 验证:【Authorization 】
      // 接口地址: /category
      this.$axios({
        method: "get",
        url: "/category",
        changeOrigin: true,
      }).then((res) => {
        // console.log(res);
        this.TabDom = res.data.data.map((element) => {
          return {
            ...element,
            PostList: [],
            pageSize: 5,
            pageIndex: 1,
            loading: false,
            finished: false,
          };
        });
        this.getCategory();
      });
    }
  },
  
  methods: {
    //获取文章列表
    getCategory() {
      // console.log(this.active);
      //获取栏目列表的id

      // const CategoryId = this.TabDom[this.active].id;
      // console.log(CategoryId);
      // 文章列表
      // 接口类型:【GET】
      // 接口地址: /post
      // 参数: category
      this.$axios({
        method: "get",
        url: "/post",
        params: {
          category: this.TabDom[this.active].id,
          pageSize: this.TabDom[this.active].pageSize,
          pageIndex: this.TabDom[this.active].pageIndex,
        },
      }).then((res) => {
        // console.log(res);
        this.TabDom[this.active].PostList = res.data.data;
      });
    },

    // 滑动到底就发起请求
    onLoad() {
      // console.log('到底了');
      setTimeout(() => {
        // 异步更新数据
        this.$axios({
          method: "get",
          url: "/post",
          params: {
            category: this.TabDom[this.active].id,
            pageSize: this.TabDom[this.active].pageSize,
            pageIndex: (this.TabDom[this.active].pageIndex += 1),
          },
        }).then((res) => {
          // console.log(res);
          this.TabDom[this.active].PostList = [
            ...this.TabDom[this.active].PostList,
            ...res.data.data,
          ];
          this.TabDom[this.active].loading = false;
          if (res.data.data.length < this.TabDom[this.active].pageSize) {
            this.TabDom[this.active].finished = true;
          }
        });
      }, 1000);
    },
  },

  //过滤器
  filters: {
    fixImgUrl(oldUrl) {
      // 过滤器用来格式化文本,
      // 那么对准时图片地址, 可以进行判断
      // 如果本来就有 http 部分 直接返回
      // 如果没有,证明是相对路径, 就添加 baseURL 再返回
      const fullUrlReg = /^http/;
      if (fullUrlReg.test(oldUrl)) {
        return oldUrl;
      } else {
        return this.$axios.defaults.baseURL + oldUrl;
      }
    },
  },
};
</script>
    
<style lang="less" scoped>
.topper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 50/360 * 100vw;
  padding: 0 10/360 * 100vw;

  background-color: #ff0000;
  .logo {
    width: 60/360 * 100vw;
    height: 100%;
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

  .search {
    width: 220/360 * 100vw;
    height: 40/360 * 100vw;
    margin: 5/360 * 100vw 0;
    line-height: 40/360 * 100vw;
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
    border-radius: 20/360 * 100vw;
    .news {
      color: #fff;
      font-size: 14/360 * 100vw;
    }
  }

  .user {
    height: 100%;
    width: 80/360 * 100vw;
    text-align: center;
    line-height: 50/360 * 100vw;
    .person {
      color: #fff;
      font-size: 20/360 * 100vw;
      margin-left: 20/360 * 100vw;
    }
  }
}

.MoreCate {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
  width: 50/360 * 100vw;
  height: 50/360 * 100vw;
  background-color: #fff;
}
</style>